<template>
  <div class="support-page">
    <div class="page-container">
      <!-- Page Header -->
      <div class="page-header">
        <h1 class="page-title">{{ $t('pages.support.title') }}</h1>
        <p class="page-subtitle">{{ $t('pages.support.subtitle') }}</p>
      </div>

      <!-- Q&A Collapse -->
      <div class="qa-section">
        <el-collapse v-model="activeNames" accordion>
          <!-- Q1: NEAR 프로토콜 소개 -->
          <el-collapse-item name="1">
            <template #title>
              <div class="question-title">
                <Icon icon="mdi:help-circle-outline" width="24" height="24" class="question-icon" />
                <span>{{ $t('pages.support.qa.question1') }}</span>
              </div>
            </template>
            <div class="answer-content">
              <p class="answer-paragraph">{{ $t('pages.support.qa.answer1_intro') }}</p>
              <p class="answer-paragraph">{{ $t('pages.support.qa.answer1_goal') }}</p>

              <div class="answer-section">
                <h4 class="section-title">{{ $t('pages.support.qa.answer1_features_title') }}</h4>
                <ul class="feature-list">
                  <li>{{ $t('pages.support.qa.answer1_feature1') }}</li>
                  <li>{{ $t('pages.support.qa.answer1_feature2') }}</li>
                  <li>{{ $t('pages.support.qa.answer1_feature3') }}</li>
                  <li>{{ $t('pages.support.qa.answer1_feature4') }}</li>
                </ul>
              </div>

              <div class="answer-section">
                <h4 class="section-title">{{ $t('pages.support.qa.answer1_tips_title') }}</h4>
                <ul class="tip-list">
                  <li>{{ $t('pages.support.qa.answer1_tip1') }}</li>
                  <li>{{ $t('pages.support.qa.answer1_tip2') }}</li>
                </ul>
              </div>

              <p class="answer-conclusion">{{ $t('pages.support.qa.answer1_conclusion') }}</p>
            </div>
          </el-collapse-item>

          <!-- Q2: 위치 정보 -->
          <el-collapse-item name="2">
            <template #title>
              <div class="question-title">
                <Icon icon="mdi:map-marker" width="24" height="24" class="question-icon" />
                <span>{{ $t('pages.support.qa.question2') }}</span>
              </div>
            </template>
            <div class="answer-content">
              <h4 class="section-title">{{ $t('pages.support.qa.answer2_title') }}</h4>
              <div class="location-info">
                <p class="location-item">
                  <Icon icon="mdi:earth" width="20" height="20" class="location-icon" />
                  <span>{{ $t('pages.support.qa.answer2_country') }}</span>
                </p>
                <p class="location-item">
                  <Icon icon="mdi:home-map-marker" width="20" height="20" class="location-icon" />
                  <span>{{ $t('pages.support.qa.answer2_address') }}</span>
                </p>
              </div>
            </div>
          </el-collapse-item>

          <!-- Q3: 출금 시간 공지 -->
          <el-collapse-item name="3">
            <template #title>
              <div class="question-title">
                <Icon icon="mdi:clock-outline" width="24" height="24" class="question-icon" />
                <span>{{ $t('pages.support.qa.question3') }}</span>
              </div>
            </template>
            <div class="answer-content">
              <div class="notice-box">
                <div class="notice-item">
                  <Icon icon="mdi:clock-check-outline" width="20" height="20" class="notice-icon" />
                  <span>{{ $t('pages.support.qa.answer3_rule1') }}</span>
                </div>
                <div class="notice-item">
                  <Icon icon="mdi:clock-alert-outline" width="20" height="20" class="notice-icon" />
                  <span>{{ $t('pages.support.qa.answer3_rule2') }}</span>
                </div>
                <div class="notice-note">
                  <Icon icon="mdi:information-outline" width="18" height="18" class="note-icon" />
                  <span>{{ $t('pages.support.qa.answer3_note') }}</span>
                </div>
              </div>
            </div>
          </el-collapse-item>

          <!-- Q4: 등급별 혜택 -->
          <el-collapse-item name="4">
            <template #title>
              <div class="question-title">
                <Icon icon="mdi:star-circle" width="24" height="24" class="question-icon" />
                <span>{{ $t('pages.support.qa.question4') }}</span>
              </div>
            </template>
            <div class="answer-content">
              <p class="answer-paragraph">{{ $t('pages.support.qa.answer4_intro') }}</p>

              <div class="tier-benefits">
                <!-- ENTRY -->
                <div class="tier-card entry-tier">
                  <h4 class="tier-name">{{ $t('pages.support.qa.answer4_tier_entry') }}</h4>
                  <div class="tier-details">
                    <div class="tier-item">
                      <span class="label">{{ $t('pages.support.qa.answer4_daily_rate') }}</span>
                      <span class="value">0.2%</span>
                    </div>
                    <div class="tier-item">
                      <span class="label">{{ $t('pages.support.qa.answer4_monthly_rate') }}</span>
                      <span class="value">6.00%</span>
                    </div>
                    <div class="tier-item">
                      <span class="label">{{ $t('pages.support.qa.answer4_annual_rate') }}</span>
                      <span class="value">72.00%</span>
                    </div>
                    <div class="tier-item">
                      <span class="label">{{ $t('pages.support.qa.answer4_min_investment') }}</span>
                      <span class="value">500 NEAR</span>
                    </div>
                  </div>
                </div>

                <!-- BASIC -->
                <div class="tier-card basic-tier">
                  <h4 class="tier-name">{{ $t('pages.support.qa.answer4_tier_basic') }}</h4>
                  <div class="tier-details">
                    <div class="tier-item">
                      <span class="label">{{ $t('pages.support.qa.answer4_daily_rate') }}</span>
                      <span class="value">0.3%</span>
                    </div>
                    <div class="tier-item">
                      <span class="label">{{ $t('pages.support.qa.answer4_monthly_rate') }}</span>
                      <span class="value">9.00%</span>
                    </div>
                    <div class="tier-item">
                      <span class="label">{{ $t('pages.support.qa.answer4_annual_rate') }}</span>
                      <span class="value">108.00%</span>
                    </div>
                    <div class="tier-item">
                      <span class="label">{{ $t('pages.support.qa.answer4_min_investment') }}</span>
                      <span class="value">2,500 NEAR</span>
                    </div>
                  </div>
                </div>

                <!-- NORMAL -->
                <div class="tier-card normal-tier">
                  <h4 class="tier-name">{{ $t('pages.support.qa.answer4_tier_normal') }}</h4>
                  <div class="tier-details">
                    <div class="tier-item">
                      <span class="label">{{ $t('pages.support.qa.answer4_daily_rate') }}</span>
                      <span class="value">0.4%</span>
                    </div>
                    <div class="tier-item">
                      <span class="label">{{ $t('pages.support.qa.answer4_monthly_rate') }}</span>
                      <span class="value">12.00%</span>
                    </div>
                    <div class="tier-item">
                      <span class="label">{{ $t('pages.support.qa.answer4_annual_rate') }}</span>
                      <span class="value">144.00%</span>
                    </div>
                    <div class="tier-item">
                      <span class="label">{{ $t('pages.support.qa.answer4_min_investment') }}</span>
                      <span class="value">5,000 NEAR</span>
                    </div>
                  </div>
                </div>

                <!-- ROYAL -->
                <div class="tier-card royal-tier">
                  <h4 class="tier-name">{{ $t('pages.support.qa.answer4_tier_royal') }}</h4>
                  <div class="tier-details">
                    <div class="tier-item">
                      <span class="label">{{ $t('pages.support.qa.answer4_daily_rate') }}</span>
                      <span class="value">0.5%</span>
                    </div>
                    <div class="tier-item">
                      <span class="label">{{ $t('pages.support.qa.answer4_monthly_rate') }}</span>
                      <span class="value">15.00%</span>
                    </div>
                    <div class="tier-item">
                      <span class="label">{{ $t('pages.support.qa.answer4_annual_rate') }}</span>
                      <span class="value">180.00%</span>
                    </div>
                    <div class="tier-item">
                      <span class="label">{{ $t('pages.support.qa.answer4_min_investment') }}</span>
                      <span class="value">15,000 NEAR</span>
                    </div>
                  </div>
                </div>

                <!-- VIP -->
                <div class="tier-card vip-tier">
                  <h4 class="tier-name">{{ $t('pages.support.qa.answer4_tier_vip') }}</h4>
                  <div class="tier-details">
                    <div class="tier-item">
                      <span class="label">{{ $t('pages.support.qa.answer4_daily_rate') }}</span>
                      <span class="value">0.7%</span>
                    </div>
                    <div class="tier-item">
                      <span class="label">{{ $t('pages.support.qa.answer4_monthly_rate') }}</span>
                      <span class="value">21.00%</span>
                    </div>
                    <div class="tier-item">
                      <span class="label">{{ $t('pages.support.qa.answer4_annual_rate') }}</span>
                      <span class="value">252.00%</span>
                    </div>
                    <div class="tier-item">
                      <span class="label">{{ $t('pages.support.qa.answer4_min_investment') }}</span>
                      <span class="value">25,000 NEAR</span>
                    </div>
                  </div>
                </div>

                <!-- VVIP -->
                <div class="tier-card vvip-tier">
                  <h4 class="tier-name">{{ $t('pages.support.qa.answer4_tier_vvip') }}</h4>
                  <div class="tier-details">
                    <div class="tier-item">
                      <span class="label">{{ $t('pages.support.qa.answer4_daily_rate') }}</span>
                      <span class="value">1%</span>
                    </div>
                    <div class="tier-item">
                      <span class="label">{{ $t('pages.support.qa.answer4_monthly_rate') }}</span>
                      <span class="value">30.00%</span>
                    </div>
                    <div class="tier-item">
                      <span class="label">{{ $t('pages.support.qa.answer4_annual_rate') }}</span>
                      <span class="value">360.00%</span>
                    </div>
                    <div class="tier-item">
                      <span class="label">{{ $t('pages.support.qa.answer4_min_investment') }}</span>
                      <span class="value">50,000 NEAR</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-collapse-item>

          <!-- Q5: 추천인 혜택 -->
          <el-collapse-item name="5">
            <template #title>
              <div class="question-title">
                <Icon icon="mdi:account-multiple" width="24" height="24" class="question-icon" />
                <span>{{ $t('pages.support.qa.question5') }}</span>
              </div>
            </template>
            <div class="answer-content">
              <div class="benefit-list">
                <div class="benefit-item">
                  <Icon icon="mdi:check-circle" width="24" height="24" class="benefit-icon" />
                  <span>{{ $t('pages.support.qa.answer5_benefit1') }}</span>
                </div>
                <div class="benefit-item">
                  <Icon icon="mdi:check-circle" width="24" height="24" class="benefit-icon" />
                  <span>{{ $t('pages.support.qa.answer5_benefit2') }}</span>
                </div>
                <div class="benefit-item">
                  <Icon icon="mdi:check-circle" width="24" height="24" class="benefit-icon" />
                  <span>{{ $t('pages.support.qa.answer5_benefit3') }}</span>
                </div>
              </div>
            </div>
          </el-collapse-item>

          <!-- Q6: NEAR Wallet 장점 -->
          <el-collapse-item name="6">
            <template #title>
              <div class="question-title">
                <Icon icon="mdi:wallet" width="24" height="24" class="question-icon" />
                <span>{{ $t('pages.support.qa.question6') }}</span>
              </div>
            </template>
            <div class="answer-content">
              <p class="answer-paragraph">{{ $t('pages.support.qa.answer6_intro') }}</p>

              <div class="answer-section">
                <h4 class="section-title">{{ $t('pages.support.qa.answer6_example_title') }}</h4>
                <ul class="feature-list">
                  <li>{{ $t('pages.support.qa.answer6_example1') }}</li>
                  <li>{{ $t('pages.support.qa.answer6_example2') }}</li>
                  <li>{{ $t('pages.support.qa.answer6_example3') }}</li>
                </ul>
              </div>

              <p class="answer-conclusion">{{ $t('pages.support.qa.answer6_note') }}</p>
            </div>
          </el-collapse-item>

          <!-- Q7: 회사 소개 -->
          <el-collapse-item name="7">
            <template #title>
              <div class="question-title">
                <Icon icon="mdi:office-building" width="24" height="24" class="question-icon" />
                <span>{{ $t('pages.support.qa.question7') }}</span>
              </div>
            </template>
            <div class="answer-content">
              <!-- Vision -->
              <div class="answer-section">
                <h4 class="section-title">{{ $t('pages.support.qa.answer7_vision_title') }}</h4>
                <p class="answer-paragraph">{{ $t('pages.support.qa.answer7_vision') }}</p>
              </div>

              <!-- Technology -->
              <div class="answer-section">
                <h4 class="section-title">{{ $t('pages.support.qa.answer7_tech_title') }}</h4>
                <ul class="feature-list">
                  <li>{{ $t('pages.support.qa.answer7_tech1') }}</li>
                  <li>{{ $t('pages.support.qa.answer7_tech2') }}</li>
                </ul>
              </div>

              <!-- Features -->
              <div class="answer-section">
                <h4 class="section-title">{{ $t('pages.support.qa.answer7_features_title') }}</h4>
                <ul class="feature-list">
                  <li>{{ $t('pages.support.qa.answer7_feature1') }}</li>
                  <li>{{ $t('pages.support.qa.answer7_feature2') }}</li>
                  <li>{{ $t('pages.support.qa.answer7_feature3') }}</li>
                </ul>
              </div>

              <!-- Partnerships -->
              <div class="answer-section">
                <h4 class="section-title">{{ $t('pages.support.qa.answer7_partnerships_title') }}</h4>
                <ul class="feature-list">
                  <li>{{ $t('pages.support.qa.answer7_asia') }}</li>
                  <li>{{ $t('pages.support.qa.answer7_latam') }}</li>
                  <li>{{ $t('pages.support.qa.answer7_europe') }}</li>
                  <li>{{ $t('pages.support.qa.answer7_northamerica') }}</li>
                </ul>
              </div>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Icon } from '@iconify/vue'

// 默认展开第一个问题
const activeNames = ref(['1'])
</script>

<style scoped lang="scss">
.support-page {
  min-height: calc(100vh - 200px);
  padding: 40px 0;
  background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
}

.page-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px;
}

// Page Header
.page-header {
  text-align: center;
  margin-bottom: 48px;

  .page-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 12px;
    background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .page-subtitle {
    font-size: 1.125rem;
    color: #64748b;
    max-width: 600px;
    margin: 0 auto;
  }
}

// Q&A Section
.qa-section {
  background: white;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

// Custom Collapse Styles
:deep(.el-collapse) {
  border: none;
}

:deep(.el-collapse-item) {
  margin-bottom: 16px;
  border-radius: 12px;
  border: 2px solid #e5e7eb;
  overflow: hidden;
  transition: all 0.3s ease;

  &:hover {
    border-color: #7c3aed;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.15);
  }

  &.is-active {
    border-color: #7c3aed;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.15);
  }
}

:deep(.el-collapse-item__header) {
  height: auto;
  min-height: 60px;
  padding: 16px 20px;
  background: #fafafa;
  border: none;
  font-size: 18px;
  font-weight: 600;
  color: #1a202c;
  transition: all 0.3s ease;

  &:hover {
    background: #f3f4f6;
  }

  &.is-active {
    background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
    color: white;

    .question-icon {
      color: white;
    }
  }
}

:deep(.el-collapse-item__wrap) {
  border: none;
  background: white;
}

:deep(.el-collapse-item__content) {
  padding: 24px 20px;
  color: #4b5563;
  font-size: 15px;
  line-height: 1.8;
}

// Question Title
.question-title {
  display: flex;
  align-items: center;
  gap: 12px;

  .question-icon {
    flex-shrink: 0;
    color: #7c3aed;
    transition: color 0.3s ease;
  }

  span {
    flex: 1;
    text-align: left;
  }
}

// Answer Content
.answer-content {
  .answer-paragraph {
    margin-bottom: 16px;
    color: #374151;
    line-height: 1.8;
  }

  .answer-section {
    margin: 24px 0;
    padding: 20px;
    background: #f9fafb;
    border-radius: 8px;
    border-left: 4px solid #7c3aed;

    .section-title {
      font-size: 16px;
      font-weight: 600;
      color: #1a202c;
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 8px;

      &::before {
        content: '•';
        color: #7c3aed;
        font-size: 20px;
      }
    }
  }

  .feature-list,
  .tip-list {
    list-style: none;
    padding: 0;
    margin: 0;

    li {
      padding: 8px 0 8px 24px;
      position: relative;
      color: #4b5563;

      &::before {
        content: '▸';
        position: absolute;
        left: 0;
        color: #7c3aed;
        font-weight: bold;
      }
    }
  }

  .answer-conclusion {
    margin-top: 20px;
    padding: 16px;
    background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
    border-radius: 8px;
    border: 1px solid #e9d5ff;
    color: #6b21a8;
    font-weight: 500;
    line-height: 1.8;
  }
}

// Location Info
.location-info {
  .location-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 12px;
    background: #f9fafb;
    border-radius: 8px;
    border-left: 3px solid #7c3aed;

    .location-icon {
      color: #7c3aed;
      flex-shrink: 0;
    }

    span {
      color: #374151;
      font-weight: 500;
    }
  }
}

// Notice Box
.notice-box {
  .notice-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    margin-bottom: 12px;
    background: #fff7ed;
    border-radius: 8px;
    border-left: 3px solid #f59e0b;

    .notice-icon {
      color: #f59e0b;
      flex-shrink: 0;
      margin-top: 2px;
    }

    span {
      color: #92400e;
      font-weight: 500;
      line-height: 1.6;
    }
  }

  .notice-note {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: #eff6ff;
    border-radius: 8px;
    border: 1px dashed #3b82f6;
    margin-top: 16px;

    .note-icon {
      color: #3b82f6;
      flex-shrink: 0;
    }

    span {
      color: #1e40af;
      font-size: 14px;
      font-weight: 500;
    }
  }
}

// Tier Benefits Styles
.tier-benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 20px;

  .tier-card {
    background: white;
    border-radius: 12px;
    padding: 24px;
    border: 2px solid #e5e7eb;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

    &:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    }

    .tier-name {
      font-size: 20px;
      font-weight: 700;
      margin-bottom: 20px;
      text-align: center;
      padding: 12px;
      border-radius: 8px;
      color: white;
    }

    .tier-details {
      display: flex;
      flex-direction: column;
      gap: 12px;

      .tier-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 14px;
        background: #f9fafb;
        border-radius: 6px;

        .label {
          color: #64748b;
          font-size: 14px;
          font-weight: 500;
        }

        .value {
          color: #1a202c;
          font-size: 16px;
          font-weight: 700;
        }
      }
    }

    // Tier specific colors
    &.entry-tier .tier-name {
      background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
    }

    &.basic-tier .tier-name {
      background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    }

    &.normal-tier .tier-name {
      background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    }

    &.royal-tier .tier-name {
      background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    }

    &.vip-tier .tier-name {
      background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
    }

    &.vvip-tier .tier-name {
      background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
      box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
    }

    // Hover effects for tier cards
    &.entry-tier:hover { border-color: #64748b; }
    &.basic-tier:hover { border-color: #06b6d4; }
    &.normal-tier:hover { border-color: #10b981; }
    &.royal-tier:hover { border-color: #f59e0b; }
    &.vip-tier:hover { border-color: #ec4899; }
    &.vvip-tier:hover { border-color: #7c3aed; }
  }
}

// Benefit List Styles
.benefit-list {
  display: flex;
  flex-direction: column;
  gap: 16px;

  .benefit-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border-radius: 10px;
    border-left: 4px solid #10b981;
    transition: all 0.3s ease;

    &:hover {
      transform: translateX(4px);
      box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
    }

    .benefit-icon {
      color: #10b981;
      flex-shrink: 0;
    }

    span {
      color: #166534;
      font-weight: 500;
      font-size: 15px;
      line-height: 1.6;
    }
  }
}

// Responsive Design
@media (max-width: 768px) {
  .support-page {
    padding: 24px 0;
  }

  .page-container {
    padding: 0 16px;
  }

  .page-header {
    margin-bottom: 32px;

    .page-title {
      font-size: 2rem;
    }

    .page-subtitle {
      font-size: 1rem;
    }
  }

  .qa-section {
    padding: 20px;
  }

  :deep(.el-collapse-item__header) {
    padding: 14px 16px;
    font-size: 16px;
  }

  :deep(.el-collapse-item__content) {
    padding: 20px 16px;
    font-size: 14px;
  }

  .question-title {
    gap: 10px;

    .question-icon {
      width: 20px;
      height: 20px;
    }
  }

  .answer-content {
    .answer-section {
      padding: 16px;
    }
  }

  // Tier Benefits Mobile
  .tier-benefits {
    grid-template-columns: 1fr;

    .tier-card {
      padding: 18px;

      .tier-name {
        font-size: 18px;
        padding: 10px;
      }

      .tier-details .tier-item {
        padding: 8px 12px;

        .label {
          font-size: 13px;
        }

        .value {
          font-size: 15px;
        }
      }
    }
  }

  // Benefit List Mobile
  .benefit-list {
    .benefit-item {
      padding: 14px 16px;
      gap: 12px;

      .benefit-icon {
        width: 20px;
        height: 20px;
      }

      span {
        font-size: 14px;
      }
    }
  }
}

// Animation
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.qa-section {
  animation: slideIn 0.6s ease-out;
}
</style>
